<template>
	<view class="farmer-p">
		<view class="navbar">
			<view class="back" @click="back">
				<u-icon name="arrow-left" color="#ffffff" size="32"></u-icon>
			</view>
		</view>
		<image src="/static/agricultureProduct/banner1.png" style="width: 100%;" mode=""></image>
		<view class="list-box">
			<view class="list-item u-flex" v-for="(item, index) in tableData" :key="index">
				<image :src="item.mainImageUrl" style="width:202rpx;height:202rpx;border-radius: 10rpx;" mode=""></image>
				<view class="list-content u-flex-1">
					<view class="title u-line-2">
						{{item.productName}}
					</view>
					<view class="des u-line-2 u-type-info">
						{{item.productTitle}}
					</view>
					<view class="u-flex u-row-between">
						<view class="">
							<text class="price-icon">￥</text>
							<text class="price">{{item.salePrice}}</text>
						</view>
						<view class="btn" @click="toDetails(item)">
							立即购买
						</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" />
			<u-empty v-if="tableData.length <= 0" text="暂无数据" mode="list"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableData: [],
				searchData: {
					page: 1,
					size: 10
				},
				total: 0,
				status: 'loadmore'
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			toDetails(item) {
				uni.navigateTo({
					url: '/pages/mallDetails/index?id=' + item.id
				})
			},
			back() {
				// #ifdef H5
				window.history.back()
				// #endif
				// #ifdef APP-PLUS
				uni.navigateBack()
				// #endif
			},
			onReachBottom() {
				if(this.tableData.length >= this.total) return ;
				this.status = 'loading';
				this.searchData.page = ++ this.searchData.page;
				setTimeout(() => {
					this.getList()
					if(this.tableData.length >= this.total) this.status = 'nomore';
					else this.status = 'loading';
				}, 2000)
			},
			getList() {
				this.$u.api.productsFarm(this.searchData).then(res => {
					if(res.code == 0) {
						if (res.data.length > 0) {
							this.tableData = [...this.tableData, ...res.data];
						} else {
							// 分页结束
							this.status = 'nomore';
						}
						if (this.tableData.length  >= this.total) {
							this.status = 'nomore';
						}
						this.total = res.extraInfo;
					} else {
						uni.showToast({
							icon:'none',
							title: res.msg
						});
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.farmer-p {
		min-height: 100vh;
		background-color: #E7F9E6;
	}
	.top-content {
		padding-top: var(--status-bar-height);
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
	}
	.navbar {
		position: fixed;
		height: 100rpx;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 1000;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
	}
	
	.back {
		width: 70rpx;
		height: 70rpx;
		background-color: rgba(0, 0, 0, 0.2);
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
	}
	.list-box {
		padding: 0 30rpx 30rpx 30rpx;
		
	}
	.list-item {
		margin-bottom: 26rpx;
		padding: 28rpx 28rpx;
		background-color: #FFFFFF;
		box-shadow: 0rpx 0rpx 8rpx 1rpx rgba(215, 215, 215, 0.93);
		
		.list-content {
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			height: 202rpx;
			color: #000000;
		}
		.title {
			font-size: 28rpx;
		}
		.des {
			font-size: 24rpx;
		}
		.price-icon {
			color: #F55519;
			font-size: 26rpx;
		}
		.price {
			color: #F55519;
			font-size: 40rpx;
			font-weight: bold;
		}
		.btn {
			padding: 10rpx 20rpx;
			background-color: #FF6600;
			color: #FFFFFF;
			font-size: 30rpx;
		}
	}
</style>
